<template>
  <!-- 单个成功案例 item 组件 -->
  <view class="success-case-item" @click="handleDetail">
    <!-- 内容容器：左侧图片 + 右侧信息 + 按钮 -->
    <view class="item-container">
      <!-- 案例图片 -->
      <image class="case-img" :src="caseData.coverUrl" mode="widthFix"></image>

      <!-- 右侧信息区域 -->
      <view class="info-wrapper">
        <!-- 标题 -->
        <view class="case-title">
          {{ caseData.title }}
        </view>
        <!-- 描述 -->
        <!-- <rich-text class="case-desc" :nodes="caseData.context"></rich-text> -->
        <!-- 时间 -->
        <view class="case-time">
          {{ formatDate(caseData.createTime, "YYYY-MM-DD HH-mm-ss") }}
        </view>
      </view>
      <!-- 查看详情按钮 -->
    </view>
    <u-button
      :text="btnText"
      color="linear-gradient(90deg, #2f7fb9 0%, #045fb2 100%)"
    ></u-button>
  </view>
</template>

<script>
import { formatDate } from "@/utils/util";
export default {
  name: "SuccessCaseItem",
  // 接收父组件传递的数据
  props: {
    // 案例数据：包含 img、title、desc、time 等
    caseData: {
      type: Object,
      required: true,
      default: () => ({
        img: "https://www.rebirthealth.com/static/images/avatar.png", // 默认占位图
        title: "默认案例标题",
        desc: "默认案例描述，实现总部管理人员远程巡店需求...",
        time: "2024-10-10 09:38:25",
      }),
    },
    // 按钮文字
    btnText: {
      type: String,
      default: "查看详情",
    },
    // 按钮背景色（可通过 props 动态控制）
    btnBgColor: {
      type: String,
      default: "#2b88e6", // uView 常用主色
    },
  },
  data() {
    return {};
  },
  methods: {
    // 点击“查看详情”回调
    handleDetail() {
      // 触发父组件事件，传递当前案例数据
      this.$emit("onDetailClick", this.caseData);
    },
    formatDate(time, format) {
      return formatDate(time, format);
    },
  },
};
</script>

<style lang="less" scoped>
/* 组件样式：基于 Less + uView 风格调整 */
.success-case-item {
  // 与其他组件的间距
  margin-bottom: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

  /* 内容容器：图片 + 信息 + 按钮 */
  .item-container {
    display: flex;
    align-items: flex-start;
    padding: 32rpx;
    /* 案例图片 */
    .case-img {
      width: 204rpx;
      height: 204rpx;
      border-radius: 8rpx;
      margin-right: 32rpx;
    }

    /* 右侧信息 wrapper */
    .info-wrapper {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      /* 标题 */
      .case-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 16rpx;
        line-height: 50rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }

      /* 描述 */
      .case-desc {
        font-size: 24rpx;
        color: #666;
        line-height: 34rpx;
        margin-bottom: 16rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; // 最多显示 2 行
      }

      /* 时间 */
      .case-time {
        font-size: 24rpx;
        color: #333;
      }

      /* 查看详情按钮 */
      .detail-btn {
        align-self: flex-start; // 按钮靠左
        background: linear-gradient(90deg, #2f7fb9 0%, #045fb2 100%);
        --button-font-size: 30rpx;
        --button-height: 64rpx;
        --button-line-height: 64rpx;
        --button-border-radius: 8rpx;
      }
    }
  }
}
</style>